<template>
	<view>
    <uni-card v-if="repairData.length!=0" padding="10px 0" v-for="(item,index) in repairData" :key="index" @click="clickCard(item.eid)">
      <template v-slot:title>
        <view style="padding-top: 15rpx;width: 100%;">
          <view style="width: 12%;display: inline-block;">
            <uni-tag :mark="true" v-if="item.repairLevel=='普通'" :text="item.repairLevel" type="primary" size="small" />
            <uni-tag :mark="true" v-if="item.repairLevel=='紧急'" :text="item.repairLevel" type="error" size="small" />
          </view>
          <view style="width: 68%;display: inline-block;">
            报修单号：{{ item.repairCode }}
          </view>
          <view style="width:20%;display: inline-block;">
            <uni-tag :inverted="true" v-if="item.currentState===0" text="待接单" type="primary" />
            <uni-tag :inverted="true" v-if="item.currentState===1" text="待维修" type="warning" />
            <uni-tag :inverted="true" v-if="item.currentState===2" text="维修中" type="success" />
            <uni-tag :inverted="true" v-if="item.currentState===3" text="待评价" type="success" />
            <uni-tag :inverted="true" v-if="item.currentState===4" text="维修完成" type="success" />
            <uni-tag :inverted="true" v-if="item.currentState===5" text="已退单" type="error" />
          </view>
        </view>
      </template>
      <view style="width: 100%;">报修日期：{{ item.createDatetime }}</view>
      <view style="width: 50%;display: inline-block;">报修人：{{ item.repairApplicantName }}</view>
      <view style="width: 50%;display: inline-block;" v-if="item.repairmanName">维修员：{{ item.repairmanName }}</view>
      <view style="width: 100%;">设备：{{ item.deviceName }}</view>
      <view style="width: 100%;">设备类型：{{ item.deviceType }}</view>
      <view style="width: 100%;">报修区域：{{ item.repairArea }}</view>
      <view style="width: 100%;">报修位置：{{ item.detailedLocation }}</view><view style="width: 100%;">故障类型：{{ item.faultType }}</view>
      <view style="width: 100%;">故障描述：{{ item.remark }}</view>

      <view slot="actions" class="card-actions" v-if="showAction(actions,item)">
        <view class="card-actions-item" v-for="(action,key) in actions"  :key="key"  @click.stop="actionsClick(action.method,item)" v-if="checkShow(item,action)">
          <uni-icons :type="action.icon" size="18" color="#999"></uni-icons>
          <text class="card-actions-item-text">{{ action.title }}</text>
        </view>
      </view>
    </uni-card>
    <o-empty v-if="repairData.length==0"></o-empty>
  </view>
</template>

<script>
	import OEmpty from "../../uni_modules/o-empty/components/o-empty/o-empty";
  export default {
    components: {OEmpty},
    props:{
      repairData:{
        default:[],
        type:Array
      },
      actions:{
        default:[],
        type:Array
      }
    },
		data() {
			return {

			}
		},
    computed:{
      showAction(){
        return function (actions,item) {
          if(actions.length==0){
            return false
          }
          for (let i = 0; i < actions.length; i++) {
            if(this.checkShow(item,actions[i])){
              return true
            }
          }
          return false;
        }

      }
    },
		methods: {
      clickCard(eid){
        let url="/pages/normalUser/public/detailRepairOrder/index?id="+eid;
        uni.navigateTo({
          url: url
        })
      },
      actionsClick(method,item){
        this.$emit(method,item)
      },
      checkShow(item,action){
        let res=action.value.indexOf(item[action.showStandard])!=-1?true:false;
        // console.log(res)
        // if(res){
        //   this.showAction=true
        // }
        // console.log(this.showAction)
        return res;
      }
		}
	}
</script>

<style>
.borderClass{
  width: 150upx;
  height: 50upx;
  background-color: #4CD964;
  padding: 10upx;
  /*margin: 20upx;*/
}
.card-actions {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 45px;
  border-top: 1px #eee solid;
}
.card-actions-item{
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>
